<template>
  <card-component :content-title="contentTitle"
                  :page="page"
                  @handleSizeChange="handleSizeChange"
                  @handleCurrentChange="handleCurrentChange">

    <table-component slot="table"
                     :table-header="tableHeader"
                     :table-data="tableData"
                     @handleEdit="handleEdit"
                     @handleDelete="handleDelete"
                     ></table-component>

  </card-component>

</template>


<script>



  import card from '@/base/card.vue'
  import table from '@/base/AutoWidthTable.vue'
  import request from '@/common/js/request'
  import util from '@/common/js/util'

  export default {
    name: "spelic-content-component",
    data() {
      return {
        contentTitle:this.$getTextByLangKey('客户列表'),
        tableHeader: [],
        tableData: [],
        page: {
          currentPage: 1,
          total: 0,
          pageSize: 20,
        },
      }
    },
    created: function () {

      this.fetchData()
    },

    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    },

    methods: {
      fetchData: function () {

        this.contentTitle = this.$getTextByLangKey('客户列表')
        this.requestClientList()
      },

      requestClientList(){

        request.requestClientList(this.page.currentPage,20,res=>{

          let list = res.data.data.list
          let clientHeader = [{type: 'index', isShow: true, width:'65',label:'NO.'},
            {prop: 'clientname', label:this.$getTextByLangKey('客户名称'), type: 'link', isShow: true}]
          let clientList = []

          list.forEach(item=>{
            item.clientname_link = "./#/wrapper/specliblist?clientid=" + item.id + "&clientname=" + item.clientname;
            clientList.push(item)
          })
          this.tableHeader = clientHeader
          this.tableData = clientList

//          this.page.currentPage = res.data.data.pageNum
          this.page.total = res.data.data.total
          this.page.pageSize = res.data.data.pageSize

        })

      },
      handleEdit: function (index, row) {
        this.$emit('handleEdit', index, row)
      },
      handleDelete: function (index, row) {
        this.$emit('handleDelete', index, row)
      },
      rowClick: function (row, event, column) {
      },
      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },

      handleCurrentChange: function (val) {
        this.page.currentPage = val
        this.fetchData()
      },
    },
    components: {
      'table-component': table,
      'card-component': card,
    },

  }
</script>


<style scoped>
  .el-card {
    box-shadow: 0 0;
    border-radius: 0;
    border:none;
  }
</style>


